<!DOCTYPE html>
<html>
<head>
<title> Download Assistant Options </title>
<style>
  body {
    margin:10px;
    font-size:13px;
    background: #EBEFF9;
    font-family: arial, sans-serif;
  }
  #header {
    padding-bottom:1em;
    padding-top:1em;
  }
  #header h1 {
    font-size: 30px;
    display:inline;
    color: #3d5d6a;
    padding-bottom:40px;
    padding-left:90px;
    padding-top:70px;
    background:url(images/icon_48.png) no-repeat 1px 62px;
  }
  a {
    color: #1C7EC5;
    text-decoration: underline;
    cursor: pointer;
  }
  #downloader {
    border-bottom: 3px dotted #CCDDED;
  }
  #downloadPathTitle {
    border-bottom: 3px dotted #CCDDED;
  }
  .downloaderOptionTitle {
    color: #333333;
    line-height: 28px;
    font-size:15px;
  }
  p {
    padding-left:2em;
    font-size:14px;
  }
  .section-header {
    background:#ebeff9;
    border-top:1px solid #b5c7de;
    font-size:99%;
    padding:3px 0 2px 5px;
    font-weight:bold;
    margin-bottom:1em;
    margin-top:1em;
  }
  .contentBox {
    background-color: #ffffff;
    border: 3px solid #bec9ce;
    -webkit-border-radius: 20px 20px;
    padding: 30px;
    text-align: left;
    margin: 50px auto 20px auto;
    width: 657px;
  }
  #contextMenuItem {
    margin-left: 32px;
  }
  #footer {
    text-align: center;
    font-size: 13px;
  }
  table {
     border-collapse: collapse;
     width: 657px;
  }
  .downloaderItem {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
        from(#fefefe), to(#eff8fa));
    height: 27px;
    border-top: 3px dotted #C1D1E0;
    border-bottom: 1px solid #C1D1E0;
    margin-bottom: 10px;
  }
  .downloaderItem th {
    font-size: 12px;
    color : #1a82c4;
    height: 27px;
    border-right: 1px solid #D0D0D0;
    color: #5e769c;
  }
  .th0 {
    width: 80px;
    height: 27px;
    text-align: center;
  }
  .th1 {
    width: 149px;
    height: 27px;
  }
  .th1  div {
    float: left;
    padding-left: 17px;
  }
  .th2 {
    width: 337px;
    height: 27px;
  }
  .th2 div {
    float: left;
    padding-left: 17px;
  }
  .th3 {
    width: 76px;
    height: 27px;
    font-size: 12px;
  }
  .th3 .btnDiv {
    float: right;
    padding-right: 17px;
  }
  #downloaderSetting {
    font-weight: bolder;
  }
  .itemImg {
    cursor: pointer;
    height: 25px;
    width: 25px;
  }
  .itemName {
    width: 123px;
    float: left;
    height: 22px;
    margin-left: 8px;
    padding-left: 10px;
  }
  .itemCommand {
    width: 309px;
    float: left;
    padding-left: 10px;
    height: 22px;
    margin-left: 8px;
  }
  button {
   cursor: pointer;
  }
  .downloaderItemContainer {}
  .downloaderItemContainer tr{
    height: 41px;
    border: 0;
  }
  input {
    outline-color: #8bcdf4;
  }
  input[type=text] {
    height: 21px;
    border: 1px solid #c1d1e0;
    background: -webkit-gradient(linear, left top, left bottom,
      from(#edf5f5), to(#fff));
  }
  .addURL-Dialog {
    z-index: 1000;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
        from(#d0e1f3), to(#f5f9fc));
    width: 285px;
    height: 155px;
    border: 1px solid #a2bad4;
    display: none;
    position: absolute;
    -webkit-border-radius: 5px;
    -webkit-box-shadow:  #ccc 0px 0px 7px 1px;
  }
  .addURL-Dialog .body {
    background-color: White;
    width: 265px;
    height: 100px;
    margin: 10px 10px;
  }
  .addURL-Dialog input {
    width: 217px;
    margin-top: 10px;
  }
  .addURL-Dialog .bottom {
    height: 50px;
    width: 285px;
    margin: auto;
  }
 .addURL-Dialog .bottom .btnDiv {
    float: right;
    padding-right: 10px;
  }
  #urlAddress {
    font-weight: bold;
    color: #6587a2;
  }
  #bottomLine {
    border-top: 1px solid #c1d1e0;
    display: none;
  }
  #downloaderSettingTitle {
     margin: 20px 0 3px;
     display: none;
  }
  #downloaderOption {
    padding-left: 16px;
  }
  #downloaderOption span {
    padding-left: 5px;
  }
  #downloaderOption div {
    padding: 3px 0 2px ;
    height: 30px;
  }
  #downloaderOption > div > label > * {
    vertical-align: middle;
    margin-right: 10px;
  }
  #downloaderOption > div > label > span {
    white-space: nowrap;
    width: 200px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tip_failed {
    color: #ffffff;
    background: #ff8080;
    height:22px;
    line-height:22px
  }
  .column-show {
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
  }
</style>
</head>
<body onload="init();">
<div class="contentBox">
  <div id="header">
    <h1><span id="pageTitle"></span></h1>
  </div>
  <h4 id="downloader" class="downloaderOptionTitle"></h4>
  <table><tr><td>
    <div id="downloaderOption"></div>
  </td><td> </td></tr>
  </table>
  <div id="contextMenuItem"><label><input type="checkbox" id="checkboxContextMenu">
    <span id="disableMenu"></span></label>
  </div>
  <div id="downloadPathSetting">
    <h4 id="downloadPathTitle" class="downloaderOptionTitle">Set Download Path</h4>
    <div style="padding-left: 19px; line-height: 25px">
      <div id="defaultPath" style="margin-left:4px;">Default download path</div>
      <input type="text" readonly="" id="downloadPath" size="50">
      <button id="setDownloadPath">Browse...</button>
      <button id="openDownloadPath">Go to folder</button>
    </div>
  </div>
  <div id="downloaderSettingTitle">
   <table><tr>
   <td style="width: 251px;"> <span id="downloaderSetting" class="downloaderOptionTitle">
   </span></td><td style="width:386px"><div id="tipContainer"></div></td>
       </tr>
   </table>  </div>
  <div id="downloaderContainer" style="display: none;">
    <div class="downloaderItem">
      <table>
        <tr>
          <th class="th0"><span id="downloaderIcon"></span></th>
          <th class="th1"><div id="downloaderName"></div></th>
          <th class="th2"><div  id="downloaderCommand"></div></th>
          <th class="th3" style="border: 0;"><div></div></th>
        </tr>
      </table>
    </div>
    <div class="downloaderItemContainer" id='downloaderContainerItem'>
      <div>
        <table id="downloaderlist"></table>
      </div>
      <div>
        <table>
          <tr>
            <td class="th0"><img id="settingImg" class="itemImg"
                src="images/icon-normal.png"></td>
            <td class="th1"><input id="settingName" class="itemName"
                type="text" maxLength="30"></td>
            <td class="th2"><input id="settingCommand" class="itemCommand"
                type="text" ></td>
            <td class="th3">
              <div class="btnDiv">
                <button type="button" id="addDownloader" style="width: 55px; height: 25px;"></button>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div>
    <div id="addURLDialog" class="addURL-Dialog">
      <div class="body">
        <div style="padding:20px">
          <div id="urlAddress"></div>
          <input type="text" id="iconURL" style="padding-left: 6px;">
        </div>
      </div>
      <div class="bottom"><div class="btnDiv">
        <button  id="addURLOkBtn"></button>
        <button  id="addURLCancelBtn"></button>
      </div></div>
    </div>
  </div>
  <h4 id="bottomLine"></h4>
   <div id="closeBtn" style="margin: 14px 0 30px 0;">
      <button  id="saveAndClose"  onclick="saveAndClose()"></button>
    </div>
    <div style="height: 50px;" id="bottomDiv"></div>
</div>
<div id="footer" style="margin: 30px 0 0 0;">&copy;2011 Google</div>
<script>
  MIN_DOWNLOADER_NUMBER_OF_ONE_COLUMN = 5;
  OPTION_LIST_PREFIX = 'do_';
  OPTION_TABLE_PREFIX = 'dt_';

  function $(id) {
    return document.getElementById(id);
  }

  function i18nReplace(id, messageName) {
    return $(id).innerHTML = chrome.i18n.getMessage(messageName);
  }

  function isLinuxPlatform() {
    return navigator.userAgent.toLowerCase().indexOf('linux') > -1;
  }

  var defaultDownloader =
      localStorage['defaultDownloader'] || 'chrome_downloader';
  var checkboxContextMenu = $('checkboxContextMenu');
  var bg = chrome.extension.getBackgroundPage();
  var downloaderManager = bg.downloaderManager;

  // Number of downloaders, including user added downloaders
  var numDownloaders = bg.enabledDownloaders.length;

  // Number of downloaders, including user added and/or deleted downloaders
  var numDownloadersEverAdded = numDownloaders;

  function setDownloadPath() {
    localStorage['downloadPath'] = bg.setDownloadPath();
    $('downloadPath').value = localStorage['downloadPath'];
  }
  
  function init() {
    bg.updateEnabledDownloaders();
    var downloadPath = $('downloadPath');
    if (localStorage['downloadPath'])
      downloadPath.value = localStorage['downloadPath'];
    else {
      downloadPath.value = bg.getDefaultDownloadPath();
      localStorage['downloadPath'] = downloadPath.value;
    }
    $('setDownloadPath').onclick = setDownloadPath;
    $('openDownloadPath').onclick = bg.openDownloadPath;

    optionList.init();
    if (isLinuxPlatform()) {
      optionTable.init();
    }

    // Set page style on Windows and Linux platform
    if (isLinuxPlatform()) {
      $('closeBtn').style.cssFloat = 'right';
    } else {
      $('closeBtn').style.margin = '34px 0 0 20px';
      $('bottomDiv').style.height = '0';
    }
  }

  // Save settting and close option page
  function saveAndClose() {
    localStorage['defaultDownloader'] = defaultDownloader;
    localStorage['contextMenu'] =
        checkboxContextMenu.checked ? 'false' : 'true';

    if (isLinuxPlatform()) {
      optionTable.saveDownloader();
    }

    // Close option page
    chrome.tabs.getSelected(null, function(tab) {
      chrome.tabs.remove(tab.id);
    });
  }

  var optionList = {
    init: function() {
      i18nReplace('pageTitle', 'page_title');
      i18nReplace('downloader', 'downloader');
      i18nReplace('disableMenu', 'menu_disable');
      i18nReplace('saveAndClose', 'save_and_close');
      i18nReplace('downloadPathTitle', 'download_path_title');
      i18nReplace('defaultPath', 'default_path');
      i18nReplace('setDownloadPath', 'set_download_path');
      i18nReplace('openDownloadPath', 'open_download_path');

      optionList.createDownloaderOption();

      if (bg.useContextMenuAPI) {
        $('contextMenuItem').style.display = 'none';
      } else if (!eval(localStorage['contextMenu'])) {
        checkboxContextMenu.checked = true;
      }
    },

    createDownloaderOption: function() {
      var enableOptions = bg.enabledDownloaders;
      var exist_no_gui_downloader = false;
      for (var i = 0; i < enableOptions.length; i++) {
        var item = enableOptions[i];
        if (item.name == 'aria2c' || item.name == 'axel' ||
            item.name == 'curl' || item.name == 'wget')
          exist_no_gui_downloader = true;
        var imageUrl =
            item.isLinux ? item.image : chrome.extension.getURL(item.image);
        var command = item.isLinux ? item.command : null;
        if ((isLinuxPlatform() && (item.isLinux || item.isSystem)) ||
            (!isLinuxPlatform() && !item.isLinux))
          optionList.addDownloaderOption(
              imageUrl, item.name, command, i, item.isUserAdded);
      }
      if (exist_no_gui_downloader)
        $('downloadPathSetting').style.display = 'block';
      else
        $('downloadPathSetting').style.display = 'none';
      optionList.updateDownloaderOptionView();
    },

    // Show in 2 columns if has more than 5 downloaders
    updateDownloaderOptionView: function() {
      var length = numDownloaders;
      var container = $('downloaderOption');
      if (length > MIN_DOWNLOADER_NUMBER_OF_ONE_COLUMN) {
        container.className = 'column-show';
        // If amount of downloaders less than 11, then show 5 downloaders in the
        // first column, show others in the second column
        if (length < (MIN_DOWNLOADER_NUMBER_OF_ONE_COLUMN * 2 + 1)) {
          container.style.height = '175px';
        } else {
          container.style.height = 'auto';
        }
      } else {
        container.style.height = 'auto';
        container.removeAttribute('class');
      }
    },

    addDownloaderOption: function(imageUrl, name, command, id, isAdded) {
      var option = document.createElement('div');
      option.id = OPTION_LIST_PREFIX + id;
      option.name = name;
      option.command = command;
      var label = optionList.createDownloaderOptionNode(
          imageUrl, name, command, isAdded);
      option.appendChild(label);
      $('downloaderOption').appendChild(option);
    },

    createDownloaderOptionNode: function(imageUrl, name, command, isAdded) {
      var label = document.createElement('label');
      var radio = document.createElement('input');
      radio.type = 'radio';
      radio.name = 'downloader';
      radio.value = name;
      if (defaultDownloader == radio.value) {
        radio.checked = true;
      }
      label.appendChild(radio);
      (function(radio) {
        radio.onchange = function() {
          if (radio.checked) {
            defaultDownloader = radio.value;
          }
        }
      })(radio);

      var img = document.createElement('img');
      img.src = imageUrl;
      img.className = 'itemImg';
      label.appendChild(img);

      var span = document.createElement('span');
      if (!isAdded)
        name = chrome.i18n.getMessage(name);
      span.innerText = name;
      span.setAttribute('title', name);
      label.appendChild(span);
      return label;
    },

    updateDownloaderOption: function(imageUrl, name, command, id) {
      var option = $(OPTION_LIST_PREFIX + id);
      option.name = name;
      option.command = command;
      while (option.childNodes.length > 0) {
        option.removeChild(option.firstChild);
      }
      var label =
          optionList.createDownloaderOptionNode(imageUrl, name, command, true);
      option.appendChild(label);
    },

    deleteDownloaderOption: function(id) {
      var waitToRemove = $(OPTION_LIST_PREFIX + id);
      var downloaderOption = $('downloaderOption');
      var radio = waitToRemove.querySelector('input');

      // If the removed downloader is selected to be default downloader, then
      // restore chrome downloader as default downloader
      if (radio.checked) {
        downloaderOption.querySelector('input[value="chrome_downloader"]')
          .checked = true;
      }

      // Remove downloader option
      downloaderOption.removeChild(waitToRemove);

      // Update downloader option view
      numDownloaders--;
      optionList.updateDownloaderOptionView();
    },

    checkRepeatDownloaderOption: function(name, command, id) {
      var downloaderOptions = $('downloaderOption').childNodes;
      for (var i = 0; i < downloaderOptions.length; i++) {
        var item = downloaderOptions[i];
        var itemId = parseInt(item.id.split('_')[1]);
        if ((item.name == name || item.command == command) && itemId != id)
          return true;
      }
      return false;
    }

  };

  var optionTable = {
    rowCount: 0,
    modifyTempValue: '',

    init: function() {
      // i18n
      i18nReplace('downloaderSetting', 'downloader_setting');
      i18nReplace('downloaderIcon', 'downloader_icon');
      i18nReplace('downloaderName', 'downloader_name');
      i18nReplace('downloaderCommand', 'downloader_command');
      i18nReplace('addDownloader', 'add_downloader');
      i18nReplace('urlAddress', 'url_address');
      i18nReplace('addURLOkBtn', 'add_url_ok_btn');
      i18nReplace('addURLCancelBtn', 'add_url_cancel_btn');

      // Use placeholder attribute to show prompting message
      $('settingName').setAttribute('placeholder',
        chrome.i18n.getMessage('setting_name'));
      $('settingCommand').setAttribute('placeholder',
        chrome.i18n.getMessage('setting_command'));
      $('iconURL').setAttribute('placeholder',
        chrome.i18n.getMessage('icon_url'));

      // Show title and content of "Add more downloaders"
      $('downloaderSettingTitle').style.display = 'block';
      $('downloaderContainer').style.display = 'block';

      // Read custom downloaders and add into option table
      optionTable.createDownloaderTable();
      optionTable.addEventListener();
    },

    createDownloaderTable: function() {
      var enableOptions = bg.enabledDownloaders;
      for (var i = 0; i < enableOptions.length; i++) {
        var item = enableOptions[i];
        if (item.isUserAdded) {
          var projId = item.command.split(' ')[0];
          if (bg.plugin.CheckObject(projId)) {
            optionTable.insertOneRowInTable(
                item.image, item.name, item.command, i);
           }
        }
      }
      optionTable.setRowBackgroundColor();
    },

    changeIcon: function(obj) {
      if (obj.src.indexOf('images/icon-normal.png') != -1) {
        obj.src = 'images/icon-over.png';
      } else if (obj.src.indexOf('images/icon-over.png') != -1) {
        obj.src = 'images/icon-normal.png';
      }
    },

    addEventListener: function() {
      $('settingImg').addEventListener('mouseover', function() {
        optionTable.changeIcon(this);
      }, false);

      $('settingImg').addEventListener('mouseout', function() {
        optionTable.changeIcon(this);
      }, false);

      $('settingImg').addEventListener('click', function() {
        var src = $('settingImg').src;
        $('iconURL').value =
            (src.indexOf('images/icon-over.png') != -1) ? '' : src;
        optionTable.showAddURLDialog(-1);
      }, false);

      // Confirm to add downloader icon
      $('addURLOkBtn').addEventListener('click', function() {
        var url = $('iconURL').value;
        if (url == '')
          url = chrome.extension.getURL('images/icon-normal.png');
        else if (!/(https?)|(chrome-extension):\/\//.test(url))
          url = 'http://' + url;
        var id = $('addURLDialog').downloaderId;
        if (id == -1) {
          $('settingImg').src = url;
        } else {
          var row = $(OPTION_TABLE_PREFIX + id);
          row.cells[0].firstChild.src = url;
          var name = row.cells[1].firstChild.value;
          var command = row.cells[2].firstChild.value;
          optionList.updateDownloaderOption(url, name, command, id);
        }
        optionTable.closeAddURLDialog();
      }, false);

      // Cancel to add downloader icon
      $('addURLCancelBtn').addEventListener('click', function() {
        optionTable.closeAddURLDialog();
      }, false);

      // Add downloader
      $('addDownloader').addEventListener('click', function() {
        var imgsrc = $('settingImg').src;
        var name = $('settingName').value;
        var command = $('settingCommand').value;
        if (name == '' || command == '')
          return;
        if (command.trim().split(' ').length == 1)
          command += ' $URL';

        var isInstallation =
            optionTable.addDownloaderToSettingTable(imgsrc, name, command);
        if (isInstallation) {
          optionList.addDownloaderOption(
              imgsrc, name, command, numDownloadersEverAdded, true);
          numDownloadersEverAdded++;

          // Always put default downloader in the last of downloader list
          var defaultChromeDownloader =
              $('downloaderOption').lastElementChild.previousElementSibling;
          $('downloaderOption').appendChild(defaultChromeDownloader);

          // Update downloader option view
          numDownloaders++;
          optionList.updateDownloaderOptionView();
        }
      }, false);
    },

    addDownloaderToSettingTable: function(imgsrc, name, command) {
      var projId = command.split(' ')[0];
      if (!bg.plugin.CheckObject(projId)) {
        // Check if the downloader is valid
        optionTable.showTip('tip_failed', 'can_not_add_downloader', '160');
        return false;
      } else if (optionTable.checkRepeatDownloader(name, command, -1)) {
        // Check if the downloader has added.
        optionTable.showTip('tip_failed', 'repeat_add_downloader', '180');
        return false;
      }

      optionTable.insertOneRowInTable(
          imgsrc, name, command, numDownloadersEverAdded);
      optionTable.setRowBackgroundColor();
      optionTable.cleanAddedDownloaderSettingData();
      return true;
    },

    checkRepeatDownloader: function(name, command, id) {
      var rows = $('downloaderlist').rows;
      for (var i = 0; i < rows.length; ++i) {
        var row = rows[i];
        var rowName = row.cells[1].firstChild.value;
        var rowCommand = row.cells[2].firstChild.value;
        var rowId = parseInt(row.id.split('_')[1]);
        if ((name == rowName || command == rowCommand) && rowId != id)
          return true;
      }
      return (optionList.checkRepeatDownloaderOption(name, command, id));
    },

    insertOneRowInTable: function(imgsrc, name, command, id) {
      var downloaderItem = $('downloaderlist');
      var row = downloaderItem.insertRow(-1);
      row.id = OPTION_TABLE_PREFIX + id;
      optionTable.insertImageToTheRow(row, imgsrc, id);
      optionTable.insertNameOrLinkToTheRow(row, 1, name);
      optionTable.insertNameOrLinkToTheRow(row, 2, command);
      optionTable.insertOptionsToTheRow(row); // Insert "Delete" link
    },

    setRowBackgroundColor: function() {
      var table = $('downloaderlist');
      var downloaderContainerItem = $('downloaderContainerItem');
      var rows = table.rows;
      var i = 0;
      for(; i < rows.length; ++i) {
        if ((i + 1) % 2 != 0) {
          rows[i].style.backgroundColor = 'White';
        } else {
          rows[i].style.backgroundColor = '#f6fbff';
        }
      }
      if (i % 2 != 0) {
       downloaderContainerItem.style.backgroundColor ='#f6fbff';
      } else {
        downloaderContainerItem.style.backgroundColor ='White';
      }
    },

    insertImageToTheRow: function(row, src, id) {
      var cell = row.insertCell(0);
      cell.className = 'th0';
      var img = document.createElement('img');
      img.className = 'itemImg';
      img.src = src;
      img.onmouseover = function() {
        optionTable.changeIcon(this);
      };
      img.onmouseout = function() {
        optionTable.changeIcon(this);
      }
      img.onclick = function() {
        $('iconURL').value = (src.indexOf('chrome-extension') == 0) ? '' : src;
        optionTable.showAddURLDialog(id);
      }
      cell.appendChild(img);
    },

    insertNameOrLinkToTheRow: function(row, cellCount, value) {
      var cell = row.insertCell(cellCount);
      cell.className = 'th' + cellCount;
      var input = document.createElement('input');
      input.onblur = optionTable.modifyDownloader;
      input.onfocus= optionTable.setOnfocusCss;
      input.onmouseover = optionTable.setMouseOverCss;
      input.onmouseout = optionTable.setMouseOutCss;
      input.className = cellCount == 1 ? 'itemName' : 'itemCommand';
      input.style.border = '0';
      input.style.background = '0';
      input.value = value;
      cell.appendChild(input);
    },

    setMouseOverCss: function(event) {
      var obj = event.target;
      optionTable.setInputCss(obj);
    },

    setMouseOutCss: function(event) {
      var obj = event.target;
      if (document.activeElement != obj) {
        optionTable.removeInputCss(obj);
      }
    },

    setOnfocusCss: function(event) {
      var obj = event.target;
      obj.style.cssText='-webkit-box-shadow: 0px 0px 10px #c3e5fa;';
      optionTable.setInputCss(obj);
      optionTable.modifyTempValue = obj.value;
    },

    setInputCss: function(obj) {
      obj.style.height = '22px';
      obj.style.border = '1px solid #c1d1e0';
      obj.style.background = '-webkit-gradient(linear, left top, left bottom,' +
        'from(#edf5f5), to(#fff))';
    },

    removeInputCss: function(obj) {
      obj.style.cssText='';
      obj.style.border = '0';
      obj.style.background = '0';
    },

    insertOptionsToTheRow: function(row) {
      var cell = row.insertCell(3);
      cell.className = 'th3';
      var aDelete = document.createElement('A');
      aDelete.innerText =  chrome.i18n.getMessage('delete');
      aDelete.href = 'javascript:';
      aDelete.style.paddingLeft = '15px';
      aDelete.onclick = optionTable.deleteDownloader;
      cell.appendChild(aDelete);
    },

    modifyDownloader: function(event) {
      var obj = event.target;
      var tr = obj.parentNode.parentNode;
      var id = parseInt(tr.id.split('_')[1]);
      var imgSrc = tr.getElementsByTagName('img')[0].src;
      var inputArr = tr.getElementsByTagName('input');
      var name = inputArr[0].value;
      var command = inputArr[1].value;
      var projId = command.split(' ')[0];

      optionTable.removeInputCss(obj);
      if ('' == projId || '' == name) {
        optionTable.restoreCommandValue(obj);
      } else if (!bg.plugin.CheckObject(projId)) {
        optionTable.showTip('tip_failed', 'can_not_add_downloader', '160');
        optionTable.restoreCommandValue(obj);
      } else if (optionTable.checkRepeatDownloader(name, command, id)) {
        optionTable.showTip('tip_failed', 'repeat_add_downloader', '180');
        optionTable.restoreCommandValue(obj);
      } else {
        optionList.updateDownloaderOption(imgSrc, name, command, id);
      }
    },

    // Restore original value
    restoreCommandValue: function(obj) {
      obj.value = optionTable.modifyTempValue;
      obj.focus();
    },

    deleteDownloader: function(event) {
      var obj = event.target;
      var tr = obj.parentNode.parentNode;
      var id = parseInt(tr.id.split('_')[1]);
      var tbody = tr.parentNode;
      tbody.removeChild(tr);
      optionTable.setRowBackgroundColor();
      optionList.deleteDownloaderOption(id);
    },

    showAddURLDialog: function(id) {
      var addURLDialog = $('addURLDialog');
      addURLDialog.downloaderId = id;
      addURLDialog.style.display = 'block';
      addURLDialog.style.top = (document.body.scrollTop +
          (document.documentElement.clientHeight - 200 -
          addURLDialog.offsetHeight) / 2) + 'px';
      addURLDialog.style.left = (document.body.scrollLeft +
          (document.documentElement.clientWidth -
          addURLDialog.offsetWidth) / 2) + 'px';
    },

    closeAddURLDialog: function() {
      $('addURLDialog').style.display = 'none';
    },

    saveDownloader: function() {
      // Upate local storage
      for (var name in localStorage) {
        if (name.indexOf('downloaderConfigure') == 0)
          localStorage.removeItem(name);
      }
      var rows = $('downloaderlist').rows;
      for (var i = 0; i < rows.length; ++i) {
        var row = rows[i];
        var imgsrc = row.cells[0].firstChild.src;
        var name = row.cells[1].firstChild.value;
        var command = row.cells[2].firstChild.value;
        localStorage['downloaderConfigure' + name] = [imgsrc, name, command];
      }

      // Update enabled downloaders
      downloaderManager.updateCustomDownloaders();
      bg.updateEnabledDownloaders();
    },

    cleanAddedDownloaderSettingData: function() {
      $('settingImg').src = 'images/icon-normal.png';
      $('settingName').value = '';
      $('settingCommand').value = '';
    },

    showTip: function(className, message, width) {
      if ($('tipTextContainer')) {
        return;
      }
      var tipContainer = $('tipContainer');
      var div = document.createElement('DIV');
      div.className = className;
      div.style.width = width + 'px';
      div.id = 'tipTextContainer';
      div.innerText = chrome.i18n.getMessage(message);
      tipContainer.appendChild(div);
      div.style.left = (document.body.clientWidth - div.clientWidth) / 2 + 'px';
      window.setTimeout(function() {
        tipContainer.removeChild(div);
      }, 2000);
    }

  };
</script>
</body>
</html>
